<template>
    <lightning-card title="HelloIterator" icon-name="custom:custom14">
        <ul class="slds-var-m-around_medium">
            <template iterator:it={contacts}>
                <li key={it.value.Id}>
                    <div lwc:if={it.first} class="list-first"></div>
                    {it.value.Name}, {it.value.Title}
                    <div lwc:if={it.last} class="list-last"></div>
                </li>
            </template>
        </ul>

        <c-view-source source="lwc/helloIterator" slot="footer">
            Loop through an array with special behavior for the first and last
            items.
        </c-view-source>
    </lightning-card>
</template>
